
@layer design {

  pre {
    background-color: var(--gray-subtle);
    border-radius: var(--radius-m);
    counter-reset: line-number 0;
    color: var(--accent);
    overflow: hidden;
    padding: 1.5em;

    /* reset */
    * {
      font-weight: 400;
      font-style: inherit;
      text-decoration: inherit
    }

    b { color: var(--brand); }

    em { color: var(--accent) }

    /* special emphasis */
    strong {
      color: var(--pop);
    }

    /* brackets, commas, semicolons... */
    i { color: var(--text-subtle) }

    /* comments */
    sup {
      color: var(--text-subtle);
      vertical-align: inherit;
      font-size: inherit;
    }

    /* marked segments */
    mark {
      background-color: color-mix(in srgb, var(--brand) 30%, transparent);
      color: inherit;
      border-radius: .2em;
      padding-block: .25em;
    }

    /* spotlight */
    label {
      color: var(--text-strong);
      font-weight: bold;
    }

    /* line numbers */
    span {
      counter-increment: line-number 1;

      &:before {
        opacity: .3;
        content: counter(line-number);
        display: inline-block;
        text-align: right;
        padding-right: 1em;
        margin-right: 1em;
        width: 2.5em;
      }
    }
  }
}
